<template>
  <div class="OrderForm">
    <div class="header">
      <p class="search-item">
        <span class="text1">订单号:</span
        ><el-input
          v-model="searchValue.orderId"
          style="width: 200px"
          placeholder="请输入订单号"
        />
      </p>
      <p>
        <span class="text1">订单状态:</span>
        <el-select
          v-model="searchValue.status"
          placeholder="Select"
          style="width: 200px"
        >
          <el-option
            v-for="(item, idx) in [
              '全部',
              '待付款',
              '待取货',
              '已完成',
              '已取消',
            ]"
            :key="item"
            :label="item"
            :value="idx + 1"
          />
        </el-select>
      </p>
      <p style="width: 35%">
        <span class="text1">下单时间:</span
        ><el-date-picker
          v-model="searchValue.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 300px"
        />
      </p>
      <p>
        <span class="text1">手机号:</span
        ><el-input
          v-model="searchValue.phone"
          style="width: 200px"
          placeholder="请输入手机号"
        />
      </p>
      <p>
        <span class="text1">姓名:</span
        ><el-input
          v-model="searchValue.name"
          style="width: 200px"
          placeholder="请输入姓名"
        />
      </p>
      <p>
        <span class="text1">收货人:</span
        ><el-input
          v-model="searchValue.consignee"
          style="width: 200px"
          placeholder="请输入收货人"
        />
      </p>
      <p style="width: 100%">
        <span class="text1"></span>
        <el-button @click="search">搜索</el-button>
        <el-button>重置</el-button>
      </p>
    </div>
    <div class="table">
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="_id" label="订单号" width="240" />
        <el-table-column prop="name" label="下单时间" width="180">
          <template #default="scope">
            {{ dayjs(scope.row.cTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="下单人" />
        <el-table-column prop="consignee" label="收货人" />
        <el-table-column prop="phone" label="联系方式" />
        <el-table-column prop="num" label="商品数量" />
        <el-table-column label="实付金额">
          <template #default="scope">
            {{ scope.row.price * scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template #default="scope">
            {{ scope.row.status == 1 ? "待付款" : "" }}
            {{ scope.row.status == 2 ? "待发货" : "" }}
            {{ scope.row.status == 3 ? "待收货" : "" }}
            {{ scope.row.status == 4 ? "待评价" : "" }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 20px"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup>
import { getData } from "@/utils/way";
import { onMounted, ref, computed } from "vue";
import dayjs from "dayjs";
let list = ref([]);
let page = ref(1);
let total = ref(-1);
let searchValue = ref({name:'',orderId:'',status:'',consignee:'',phone:'',date:['','']});
let getlist = async () => {
  let res = await getData(`/szh/order?page=${page.value}`);
  list.value = res.data.data;
  total.value = res.data.total;
  console.log(list.value);
};
let search = async () => {
  console.log(searchValue.value);
  let res = await getData(
    `/szh/order?page=${page.value}&name=${searchValue.value.name}&orderId=${searchValue.value.orderId}&consignee=${searchValue.value.consignee}&status=${searchValue.value.status}&phone=${searchValue.value.phone}&st=${searchValue.value.date?searchValue.value.date[0]:''}&et=${searchValue.value.date?searchValue.value.date[1]:''}`
  );
  list.value = res.data.data;
  total.value = res.data.total;
};

onMounted(() => {
  getlist();
});
</script>
<style>
.OrderForm {
  width: 100%;
  background-color: #fff;
  padding: 20px;
}
.OrderForm .header {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.header p {
  width: 25%;
  height: 50px;
  line-height: 50px;
}
.text1 {
  width: 100px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
}
.table {
  margin-top: 20px;
}
</style>
